<template>
  <f7-page>
    <div class="user-info-box bg-color-white" @click="$f7router.navigate('/user-profile/')">
      <img :src="userInfo.user.pic || require('../../static/logo.png')" alt="">
      <div>
        <div><f7-icon f7="star_fill"></f7-icon>{{userLevel}}</div>
        <p>ID: {{userInfo.user.uid}}</p>
      </div>
    </div>

    <f7-list class="margin-b20">
      <f7-list-item :title="$t('m.tabs.currencyExchange')" link="/bb-exchange/">
        <f7-icon icon="iconfont icon-duihuan" slot="media"></f7-icon>
      </f7-list-item>
      <f7-list-item :title="`ZOL${$t('m.tabs.revenueBreakdown')}`" link="/revenue-breakdown/">
        <f7-icon icon="iconfont icon-leijishouyi" slot="media"></f7-icon>
      </f7-list-item>
      <!--<f7-list-item title="FIRMA收益明细" link="/revenue-breakdown/?type=2">
        <f7-icon icon="iconfont icon-leijishouyi" slot="media"></f7-icon>
      </f7-list-item>-->
    </f7-list>
    <f7-list class="margin-b20">
      <f7-list-item link="/msg-center/">
        <f7-icon icon="iconfont icon-RectangleCopy" slot="media"></f7-icon>
        <p slot="title">{{$t('m.tabs.systemNotification')}}<f7-badge v-if="notReadNum > 0" color="red" style="margin-left: 10px">{{notReadNum}}</f7-badge></p>
      </f7-list-item>
      <f7-list-item :title="$t('m.tabs.myCommunity')" link="/my-community/">
        <f7-icon icon="iconfont icon-shequ" slot="media"></f7-icon>
      </f7-list-item>
      <f7-list-item :title="$t('m.tabs.myMallOrder')" link @click="$toast('暂未开放')"><!-- link="/orders/"-->
        <f7-icon icon="iconfont icon-my-dingdan" slot="media"></f7-icon>
      </f7-list-item>
      <f7-list-item :title="$t('m.tabs.businessPartner')" link="/promote/">
        <f7-icon icon="iconfont icon-xiaohuoban" slot="media"></f7-icon>
      </f7-list-item>
      <!--<f7-list-item title="APP下载" link="/download/">
        <f7-icon icon="iconfont icon-xiazai" slot="media"></f7-icon>
      </f7-list-item>-->
      <f7-list-item :title="$t('m.tabs.contactUs')" link="/contact-us/">
        <f7-icon icon="iconfont icon-lianxiwomen" slot="media"></f7-icon>
      </f7-list-item>
    </f7-list>
    <f7-list class="margin-b20">
      <!--<f7-list-item :title="$t('m.tabs.helpCenter')" link="/help-center/">
        <f7-icon icon="iconfont icon-bangzhu" slot="media"></f7-icon>
      </f7-list-item>-->
      <f7-list-item :title="$t('m.tabs.setting')" link="/setting/">
        <f7-icon icon="iconfont icon-NMStubiao-" slot="media"></f7-icon>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getArticles } from "../../api/my";
  import {getToken} from "../../utils/auth";

  export default {
    name: "my",
    data() {
      return {
        msgList: [],
        notReadNum: 0
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'config']),
      userLevel() {

        if(this.userInfo) {
          let {level, status}=this.userInfo.user;
            // status=this.userInfo.user.status;

          if (status==0 && level==0) return '普通用户';
          else if(status==1 && level==0) return '有效用户';
          else return this.$store.getters.config.user_level_type[level]
        }
        return '';
      }
    },
    watch: {
      '$store.getters.token'(val) {
        if(val) this.init();
      }
    },
    mounted() {
      console.log(this.userInfo);
      if (getToken()) this.init();
    },
    methods: {
      init() {
        getArticles({type: 2}).then(res => {
          this.notReadNum = res.data.reduce((total, cur) => {
            return total += cur.status === '1'?1:0;
          }, 0);
        })
      },
      downloadApp() {
        window.open('https://www.baidu.com');
      }
    }
  }
</script>

<style scoped lang="scss">
  .user-info-box {
    display: flex;
    padding: $padding;
    margin-bottom: $padding;
    align-items: center;
    img {
      width: 120px;
      border-radius: 50%;
      margin-right: $padding;
    }
    > div {
      > div{
        background: linear-gradient(to right, #b9a47d, #e0d5bf);
        text-align: center;
        border-radius: 5px;
        padding: 2px 15px;
        color: #fff;
        .icon {
          margin-right: 5px;
          font-size: 25px;
          margin-top: -5px;
        }
        margin-bottom: 10px;
      }
      p {
        color: #b6b6b6;
      }
    }
  }
</style>
